// 单行超出省略号
@mixin line1 {
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
}
// 多行文本省略号
@mixin lines($line) {
	display: -webkit-box;
	-webkit-line-clamp: $line;
	-webkit-box-orient: vertical;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
}

.line {
	&-1 {
		@include line1;
	}
	&-2 {
		@include lines(2);
	}
	&-3 {
		@include lines(3);
	}
	&-4 {
		@include lines(4);
	}
}

.flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	&-col {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-moz-box-orient: vertical;
		-moz-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	&-row {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-moz-box-orient: horizontal;
		-moz-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
	}
	&-col-r {
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-webkit-flex-direction: column-reverse;
		-moz-box-orient: vertical;
		-moz-box-direction: reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}
	&-row-r {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-webkit-flex-direction: row-reverse;
		-moz-box-orient: horizontal;
		-moz-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}
	&-a-c {
		-webkit-box-align: center;
		-webkit-align-items: center;
		-moz-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	&-a-s {
		-webkit-box-align: start;
		-webkit-align-items: flex-start;
		-moz-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}
	&-a-e {
		-webkit-box-align: end;
		-webkit-align-items: flex-end;
		-moz-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
	}
	&-a-st {
		-webkit-box-align: stretch;
		-webkit-align-items: stretch;
		-moz-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
	}
	&-j-c {
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	&-j-sb {
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-moz-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	&-j-e {
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-moz-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}
	&-j-sa {
		-webkit-justify-content: space-around;
		-ms-flex-pack: distribute;
		justify-content: space-around;
	}
	&-s-0 {
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}
	&-1 {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-moz-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}
	&-w {
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	&-w-r {
		-webkit-flex-wrap: wrap-reverse;
		-ms-flex-wrap: wrap-reverse;
		flex-wrap: wrap-reverse;
	}
	&-n-w {
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
}
.bg {
	&-img {
		background-position: center;
		background-repeat: no-repeat;
		-o-background-size: contain;
		background-size: contain;
		@extend .transition;
	}
	&-w {
		background-color: #fff;
	}
	&-w-f5 {
		background-color: #f5f5f5;
	}
}
.position {
	&-r {
		position: relative;
	}
	&-a {
		position: absolute;
	}
	&-s {
		position: -webkit-sticky;
		position: sticky;
	}
	&-f {
		position: fixed;
	}
	&-c {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
}
.overflow {
	&-h {
		overflow: hidden;
	}
	&-v {
		overflow: visible;
	}
	&-x {
		overflow-x: auto;
	}
	&-y {
		overflow-y: auto;
	}
}
.box {
	&-b {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	&-c {
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}
	&-s {
		-webkit-box-shadow: 0 0.04rem 0.2rem 0 rgba(0, 0, 0, 0.02);
		box-shadow: 0 0.04rem 0.2rem 0 rgba(0, 0, 0, 0.02);
	}
	&-border {
		border: 1px solid #ccc;
	}
	&-radius {
		border-radius: 0.1rem;
	}
}
.clearfix {
	clear: both;
	zoom: 1;
	&::after {
		content: "";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
}
.cursor {
	&-p {
		cursor: pointer; // 点击手
		@extend .transition;
	}
	&-d {
		cursor: default; // 默认鼠标
	}
	&-e {
		cursor: e-resize; // 左右箭头
	}
	&-n {
		cursor: n-resize; // 上下箭头
	}
	&-ne {
		cursor: ne-resize; // 斜右上左下箭头
	}
	&-g {
		cursor: -webkit-grab;
		cursor: -moz-grab;
		cursor: grab; // 拖拽手
	}
	&-ging {
		cursor: -webkit-grabbing;
		cursor: -moz-grabbing;
		cursor: grabbing; // 拖拽手-抓住
	}
	&-drop {
		cursor: no-drop; // 禁止
	}
	&-move {
		cursor: move; // 十字架移动
	}
	&-none {
		cursor: none; // 消失
	}
}
.op {
	&-0 {
		opacity: 0;
	}
	&-1 {
		opacity: 0.1;
	}
	&-2 {
		opacity: 0.2;
	}
	&-3 {
		opacity: 0.3;
	}
	&-4 {
		opacity: 0.4;
	}
	&-5 {
		opacity: 0.5;
	}
	&-6 {
		opacity: 0.6;
	}
	&-7 {
		opacity: 0.7;
	}
	&-8 {
		opacity: 0.8;
	}
	&-9 {
		opacity: 0.9;
	}
	&-100 {
		opacity: 1;
	}
}
.transition {
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
